<template>
  <div class="home">
    <Table class="info-table" border stripe :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>

<script>

  import {mapState} from 'vuex'
  import {getPrincipalInStore} from "../common/js/auth";

  export default {
    name: 'Home',
    created() {
      let principal = getPrincipalInStore();
      if (principal) {
        this.$store.commit('changeIsLogin', true);
        this.$store.commit('setUser', principal);
        this.$store.commit('setUsername', principal.username);
        // 加载用户信息
        this._getAuth()
      } else {
        this.$Message.error('没有权限-请先登录');
        this.$router.push('/login');
      }
    },
    data() {
      return {
        tableColumn: [
          {
            title: '信息',
            key: 'information'
          },
          {
            title: '详情',
            key: 'detail'
          }
        ],
        tableData: []
      }
    },
    computed: {
      ...mapState(['user'])
    },
    methods: {
      _getAuth() {
        console.log(this.user);
        console.log(this.user.createTime);
        this.tableData = [
          {
            information: '账户类型',
            detail: '云笔记免费账户'
          },
          {
            information: '用户名',
            detail: this.user.username
          },
          {
            information: '手机号',
            detail: this.user.mobile
          },
          {
            information: '邮箱',
            detail: this.user.email
          },
          {
            information: '创建时间',
            detail: this.user.createTime
          },
          {
            information: '设备',
            detail: '网页端访问云笔记'
          }
        ]
      }
    },
  }
</script>

<style lang="stylus" scoped>
  .home >>> .ivu-table-cell
    font-weight 700
    font-size 14px

  .home
    margin-left 100px

  // .info-table
  //   margin 30px
</style>
